<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>HTML5</title>
</head>
<body>
<form action="self.html">
<fieldset>
<legend>HTML5</legend>
<p><input type="text" id="in1" value="" name="texttest" /></p>
<p><textarea rows="4" cols="20" id="ta1"></textarea></p>
<p><input type="password" id="in2" value="" name="passwordtest" /></p>
<p>
	<label for="in3">Red</label>
	<input type="checkbox" id="in3" name="checktestred" /><br />
	<label for="in31">Green</label>
	<input type="checkbox" id="in31" name="checktestgreen" /><br />
	<label for="in32">Red</label>
	<input type="checkbox" id="in32" name="checktestblue" /><br />
</p>
<p>
	<label for="in4">Red</label>
	<input type="radio" id="in4" name="radtest" value="Red" /><br />
	<label for="in41">Green</label>
	<input type="radio" id="in41" name="radtest" value="Green" /><br />
	<label for="in42">Blue</label>
	<input type="radio" id="in42" name="radtest" value="Blue" /><br />
</p>
<p>
	<select name="selecttest1" id="sel1">
		<option value="Red" label="Red">Red</option>
		<option value="Green" label="Green">Green</option>
		<option value="Blue" label="Blue">Blue</option>
	</select>
</p>
<p>
	<select name="selecttest1" id="sel2" multiple="multiple">
		<option value="Red" label="Red">Red</option>
		<option value="Green" label="Green">Green</option>
		<option value="Blue" label="Blue">Blue</option>
	</select>
</p>
<p><input type="file" id="in7" value="" name="filetest" /></p>
<p><input type="hidden" id="in8" value="1" name="hiddentest" /></p>
<p><input type="image" id="in9" value="" name="imagetest" src="logo.jpg" /></p>
<p><input type="button" id="in10" value="Type is Button Test" name="buttontest" /></p>
<p><input type="submit" id="in11" value="Submit" /></p>
<p><input type="reset" id="in12" value="Reset" /></p>
<p><label for="in51">Search Test</label> <input type="search" id="in51" value="" name="searchtest" /></p>
<p><label for="in52">Telephone Test</label> 
	<input 
		type="tel" 
		id="in52" 
		value="" 
		name="telephonetest" 
		title="Standard U.S. telephone number: (000) 000-0000"
		required="required"
		pattern="\(?[0-9]{3}\)?[\s\-]*[0-9]{3}[\s\-]*[0-9]{4}" />
</p>
<p>
<label for="in53">URL Test</label> 
<input type="url" name="urllisttest" list="urls" id="in53">
<datalist id="urls">
 <option label="MIME: Format of Internet Message Bodies" value="http://tools.ietf.org/html/rfc2045">
 <option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/">
 <option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">
 <option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/">
 <option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html">
 <option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/">
</datalist>
</p>
<p><label for="in54">Email Test</label> <input type="email" id="in54" value="" name="emailtest" /></p>
<p><label for="in55">Datetime Test</label> <input type="datetime" id="in55" value="" name="datetimetest" /></p>
<p><label for="in56">Date Test</label> <input type="date" id="in56" value="" name="datetest" /></p>
<p><label for="in57">Month Test</label> <input type="month" id="in57" value="" name="monthtest" /></p>
<p><label for="in58">Week Test</label> <input type="week" id="in58" value="" name="weektest" /></p>
<p><label for="in59">Time Test</label> <input type="time" id="in59" value="" name="timetest" /></p>
<p><label for="in60">Datetime-local Test</label> <input type="datetime-local" id="in60" value="" name="datetime-localtest" /></p>
<p>
	<label for="in61">Number Test</label> 
	<input 	
		type="number" 
		id="in61" 
		value="" 
		name="numbertest" 
		min="0" 
		max="500" 
		step="5"
		title="A multiple of 5 between zero (0) and five hundred (500)"
	/>
</p>
<p>
	<label for="in62">Range Test</label> 
	<input 
		type="range" 
		id="in62" 
		value="100" 
		name="rangetest" 
		min="0" 
		max="500" 
		step="5"
		title="A multiple of 5 between zero (0) and five hundred (500)"
	/>
</p>
<p><label for="in63">Color Test</label> <input type="color" id="in63" value="" name="colortest" /></p>
<p><label for="browsers">Input List Test</label> 
<input list="browsers" id="inlisttest" name="browserlisttest">
<datalist id="browsers">
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox">
</datalist>
</p>
<p><button id="buttonElementTest">Element is Button Test</button></p>
</fieldset>
</form>
</body>
</html>
